<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--媒体查询-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>栅格系统</title>
    <link rel="stylesheet" href="../../../js/bootstrap/css/bootstrap.css">
</head>
<body>
<!--    特点：
             响应式布局 --- mobile first
     1. 容器
         1、 流式
         2、默认
     2. 行
     3. 列
     4. 偏移量
-->
<div class="container">
    <div class="row">
        <div class="col-md-3 col-sm-6">col-md-3</div>
        <div class="col-md-3 col-sm-6">col-md-3</div>
        <div class="col-md-3 col-sm-6">col-md-3</div>
        <div class="col-md-3 col-sm-6">col-md-3</div>
    </div>
    <div class="row">
        <div class="col-md-3 col-md-offset-3">col-md-3</div>
        <div class="col-md-6">col-md-6</div>
    </div>
    <div class="row">row-1</div>
</div>
</body>
</html>